<template>
  <div class="pieChart">
    <div class="pieTitle">各省市占比情况</div>
    <div class="cenBox">
      <div class="fundShow">
        <div class="column1 col">
          <div class="percent">28%</div>
          <div class="useWay">湖南</div>
        </div>
        <div class="column2 col">
          <div class="percent">15%</div>
          <div class="useWay">湖北</div>
        </div>
        <div class="column3 col">
          <div class="percent">13%</div>
          <div class="useWay">福建</div>
        </div>
        <div class="column4 col">
          <div class="percent">12%</div>
          <div class="useWay">广东</div>
        </div>
        <div class="column5 col">
          <div class="percent">10%</div>
          <div class="useWay">贵州</div>
        </div>
        <div class="column6 col">
          <div class="percent">8%</div>
          <div class="useWay">河北</div>
        </div>
        <div class="column7 col">
          <div class="percent">7%</div>
          <div class="useWay">内蒙古</div>
        </div>
        <div class="column8 col">
          <div class="percent">7%</div>
          <div class="useWay">辽宁</div>
        </div>
      </div>
      <div class="acManagePieChart" ref="pie_chart"></div>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      chartInstance: null,
      allData: null
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    // 初始化实例对象
    initChart() {
      this.chartInstance = this.$ECharts.init(this.$refs.pie_chart)
      this.getData()
    },
    // 获取服务器的数据
    getData() {
      // const {data:ret} = await this.$http.get('')
      // this.allData = ret
      console.log(1312)
      this.updateChart()
    },
    // 更新图表
    updateChart() {
      console.log(1312)
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '各省市占比 <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Radius Mode',
            type: 'pie',
            radius: [10, 65],
            center: ['40%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            },
            label: {
              show: false
            },
            color: [
              '#d57759',
              '#ff6567',
              '#79a82f',
              '#3b84ab',
              '#424dac',
              '#2e3b7a',
              '#eda0f0',
              '#f5d858'
            ],
            data: [
              { value: 28, name: '湖南' },
              { value: 15, name: '湖北' },
              { value: 13, name: '福建' },
              { value: 12, name: '广东' },
              { value: 10, name: '贵州' },
              { value: 8, name: '河北' },
              { value: 7, name: '内蒙古' },
              { value: 7, name: '辽宁' }
            ]
          }
        ]
      }
      console.log(122)
      this.chartInstance.setOption(option)
      console.log(122)
    }
  }
}
</script>
<style lang="less" scoped>
.pieTitle {
  color: #fff;
  font-size: 0.375rem;
  font-weight: 900;
  font-family: monospace;
  background-color: rgb(182, 1, 1);
  height: 0.625rem;
  line-height: 0.625rem;
  padding-left: 0.25rem;
}
.cenBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .fundShow {
    flex: 1;
    padding-left: 0.25rem;
    display: grid;
    grid-template-columns: 0.9rem 0.9rem;
    gap: 0.125rem;
    align-items: center;
    justify-items: center;
    .percent {
      font-size: 15px;
    }
    .useWay {
      font-size: 10px;
    }
    .column1 {
      display: flex;
      flex-direction: column;
      .percent {
        color: #f6a788;
      }
      .useWay {
        display: flex;
        flex-direction: row;
        color: rgba(255, 255, 255, 0.7);
      }
    }
    .column2 {
      display: flex;
      flex-direction: column;
      .percent {
        color: #f5d858;
      }
      .useWay {
        display: flex;
        flex-direction: row;
        color: rgba(255, 255, 255, 0.7);
      }
    }
    .column3 {
      display: flex;
      flex-direction: column;
      .percent {
        color: #8aed3d;
      }
      .useWay {
        display: flex;
        flex-direction: row;
        color: rgba(255, 255, 255, 0.7);
      }
    }
    .column4 {
      display: flex;
      flex-direction: column;
      .percent {
        color: #57ceff;
      }
      .useWay {
        display: flex;
        flex-direction: row;
        color: rgba(255, 255, 255, 0.7);
      }
    }
    .column5 {
      display: flex;
      flex-direction: column;
      .percent {
        color: #9ddefb;
      }
      .useWay {
        display: flex;
        flex-direction: row;
        color: rgba(255, 255, 255, 0.7);
      }
    }
    .column6 {
      display: flex;
      flex-direction: column;
      .percent {
        color: #8da0f0;
      }
      .useWay {
        display: flex;
        flex-direction: row;
        color: rgba(255, 255, 255, 0.7);
      }
    }
    .column7 {
      display: flex;
      flex-direction: column;
      .percent {
        color: #eda0f0;
      }
      .useWay {
        display: flex;
        flex-direction: row;
        color: rgba(255, 255, 255, 0.7);
      }
    }
    .column8 {
      display: flex;
      flex-direction: column;
      .percent {
        color: #ffd0f0;
      }
      .useWay {
        display: flex;
        flex-direction: row;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
  .acManagePieChart {
    flex: 3;
    height: 3.7rem;
    margin-top: 0.25rem;
  }
}
</style>
